import React, { FC, ReactElement, ReactNode, useState, Dispatch, useEffect, isValidElement } from 'react';
import { getComponentType } from '@U/bool';
import { Tabs, TabsProps, TabPaneProps } from 'antd';
import './index.less';

declare type PaneObject = {
  id: string | number;
  title: string;
  closable?: boolean;
  component: () => ReactNode | ReactElement;
}
declare type PanesProps = Array<PaneObject>;

const Test = () => <div>标题3</div>;
const initialPanes: PanesProps = [
  { id: '0', title: '标题1', closable: true, component: () => <div>标题1</div> },
  { id: '1', title: '标题2', closable: true, component: () => <div>标题2</div> },
  { id: '2', title: '标题3', closable: true, component: Test },
];

type IProps = {
  paneList: PanesProps;
  // eslint-disable-next-line no-unused-vars
  add: (panes: PanesProps, setPanes: Dispatch<PanesProps>) => void;
  width: string|number;
  paneProps: TabPaneProps;
}

/** STabs 组件说明
 * @author: JasonStandFor
 * @description Desc:: 'props' 参数说明: props 主要来源与 antd.TabsProps 和 antd.TabPaneProps，外加 paneList、add
 * @paneList {Array} paneList - 需要传入的 initialPanes
 * @add {Function} add - 用于往 paneList 添加数据的方法
 * @paneProps {TabPaneProps} paneProps - 用于往 TabPane 添加参数
 * @param { antd.TabsProps | antd.TabPaneProps } props
 * @return STabs
 * @example:
 example 1:
 type props = TabsProps;
 const Test = () => <div>标题3</div>;
 const initialPanes: Array<TabPaneProps> = [
 { id: '0', title: '标题1', component: () => <div>标题1</div> },
 { id: '1', title: '标题2', component: () => <div>标题2</div> },
 { id: '2', title: '标题3', component: Test },
 ];
 const add = (pansList, changeList) => { // 只在 type="editable-card" 有效
   changeList([
    ...pansList,
    { id: `${pansList.length}`, title: `标题${pansList.length + 1}`, component: () => {} },
  ]);
 };
 <STabs
   type="editable-card" // line、card editable-card
   paneList={initialPanes}
   add={add}
   {...props}

 example 2:
 <STabs
   paneList={initialPanes}
   {...props}
 />
 **/
const Index: FC<Partial<IProps> & Partial<TabsProps>> = (props): ReactElement => {
  const { paneList, add, width = '100%', size = 'middle', animated = true, centered = true, paneProps, ...tabProps } = props;
  const defaultParams = { size, centered, animated };
  const [panes, setPanes] = useState<PanesProps>(initialPanes);

  useEffect(() => {
    if (Array.isArray(paneList) && paneList.length) {
      setPanes(paneList);
    }
  }, [paneList]);

  const remove = (targetKey: React.MouseEvent | React.KeyboardEvent | string) => {
    const newPanes = panes.filter((pane) => pane.id !== targetKey);
    setPanes(newPanes);
  };

  // const onChange = (key) => {
  //   console.log(key);
  // };

  const onEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
    if (action === 'add') {
      try {
        add && add(panes, setPanes);
      } catch (e) {
        console.error(e);
      }
    }
    if (action === 'remove') {
      remove(targetKey);
    }
  };

  return (
    <div className="base-component-super-tabs" style={{ width }}>
      <Tabs defaultActiveKey="0" onEdit={onEdit} { ...defaultParams } {...tabProps}>
        {
          panes.map((item: PaneObject) => {
            return (
              <Tabs.TabPane tab={item.title} key={item.id} closable={item.closable} {...paneProps}>
                {
                  getComponentType(item.component, isValidElement)
                    ? item.component()
                    : item.title
                }
              </Tabs.TabPane>
            )
          })
        }
      </Tabs>
    </div>
  );
};

export default Index;
